
<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span style="font-size: 24px;">{{$t('pageTitle.spreadProductSetting')}}</span><!--支付渠道-->
            </h3>
        </div>
        <div class="module_content">
            <!--查询start-->
            <el-form ref="form"  :model="loanForm" :inline="false">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item>
                            <el-select v-model="loanForm.appName" :placeholder="$t('system.appName')" style="width:100%;" @change="getLoanChannel">
                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="4"> -->
                        <!-- <el-button @click="getLoanChannel" type="primary">{{ $t('common.search') }}</el-button> -->
                    <!-- </el-col> -->
                </el-row>
            </el-form>
            <div  v-if="loanForm.appName!=''">
                <el-form :inline="true" ref="editForm" :model="editForm" class="demo-form-inline">
                  <el-form-item 
                    :label="$t('common.autoBalanceNode')"  
                    prop="rate" 
                    :rules="[
                      { required: true, message: '不能为空'},
                      { type: 'number', message: '请输入数字'}
                    ]"
                  >
                  <el-row :gutter="24">
                      <el-col  :span="22">
                        <el-input v-model.number="editForm.rate"></el-input>
                      </el-col>
                      <el-col :span="2" style="padding:0">%</el-col>
                  </el-row>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary"  @click="submitForm('editForm')">{{this.$t('common.modify')}}</el-button>
                  </el-form-item>
                </el-form>
                <div>（{{this.$t('common.blanceNodeChangeTips')}}）</div>
            </div>
        </div>

        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="30%"
          >
          <span>{{this.$t('common.isEditblanceNode')}}</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{this.$t('common.cancel')}}</el-button>
            <el-button type="primary" @click="submint">{{this.$t('common.confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return {
            dialogVisible:false,
            appList: [],
            loanForm: {
                appName: ''
            },
            editForm:{
                rate:'',
                appName:'',
                id:''
            }
        }
    },
    created(){
        this.getAppList();
    },
    methods:{
        submint(){
            let params = {
                appName:this.editForm.appName,
                rate:this.editForm.rate/100,                       
            };
            if(this.editForm.id){
                params.id = this.editForm.id
            };
            
            this.$api.finance.fianceLedger.editAutoSettleBillConfig(params).then(res=>{
                const {status, data, error} = res;
                if ('1' === status && error === '00000000') {
                    this.$message.success('edit success');
                    this.dialogVisible = false
                }
            })
        },
        submitForm(formName){
            if(this.editForm.appName=='') return
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = true
                } else {
                  console.log('error submit!!');
                  return false;
                }
            });
        },
        getLoanChannel(val){
            let params = {
                appName:val
            };
            this.editForm.appName = val;
            this.$api.finance.fianceLedger.getAutoSettleBillConfig(params).then(res=>{
                const {status, data, error} = res;
                if ('1' === status && error === '00000000') {
                    if(data&&data.rate){
                        this.editForm = {
                            rate:data.rate*100,
                            appName:data.appName,
                            id:data.id
                        }
                    }else{
                        this.editForm = {
                            rate:100,
                            appName:val,
                            id:''
                        }
                    }
                }
            })
        },
        // 根据domain获取APP列表
        getAppList() {
            const params = {
                appListDomain: this.$storage.get('user').domain,
            };
            this.$api.systemManage.getAppListdomain(params).then((res) => {
                const {status, data, error} = res;
                if ('1' === status && error === '00000000') {
                    this.appList = data || [];
                }
            });
        },
    }
}
</script>

<style>

</style>